/*
 * Copyright (c) 2007-2020 西安交通信息投资营运有限公司 版权所有
 * 作者:焦元义
 */

import React, {useCallback} from 'react';
import {Form, Input, Modal, Spin, Switch} from 'antd';
import {SysDicModel} from '../data';
import service from "@/pages/sys/dic/service";
import TreeSelectParent from "@/lib/TreeSelectParent";
import {EditDialogProps} from "@/global";
import useForm from "@/hooks/useForm";
import useLoad from "@/hooks/useLoad";
import EditModalFooter from "@/lib/EditModalFooter";
import styles from "@/utils/utils.less";
import {FormProps} from "antd/lib/form";
import useEditModalFooter from "@/hooks/useEditModalFooter";
import useSave from "@/hooks/useSave";

const FormItem = Form.Item;

/** 表单布局 */
const formLayout = {
  labelCol: {span: 7},
  wrapperCol: {span: 13},
};

/** 系统字典编辑表单组件属性 */
export interface EditProps extends EditDialogProps {
}

/** 系统字典编辑表单组件 */
const SysDicEdit: React.FC<EditProps> = props => {
  const {params: {created,newData, id, onSubmitSucess}, visible, hide} = props;
  const {form, bind, reset, submit} = useForm();
  const {loading: dataLoading, data: model} = useLoad<SysDicModel>({
    isLoad: Boolean(id),
    isClear: false,
    defaultData: newData as SysDicModel,
    onLoad: () => service.selectById(id),
    onSuccess: bind,
  }, [id]);
  const {finishCallback, ...footerProps} = useEditModalFooter({created, reset, hide, onSubmitSucess});
  const {submitLoading, save} = useSave<SysDicModel>({created, onSave: service.save,});
  const onFinish = useCallback((values: any) => {
    save(model, values, finishCallback);
  }, [model]);

  return (
    <Modal
      title={created ? '新建系统字典' : '编辑系统字典'}
      visible={visible}
      width={700}
      destroyOnClose
      maskClosable={false}
      onCancel={hide}
      footer={(
        <EditModalFooter
          {...footerProps}
          okLoading={dataLoading || submitLoading}
          onOk={submit}
          onCancel={hide}/>
      )}
    >
      <Spin spinning={dataLoading || submitLoading} wrapperClassName={styles.h100p}>
        {model && (<EditForm {...{form, model, created, onFinish}}/>)}
      </Spin>
    </Modal>
  );
};

function EditForm(props: FormProps & { created: boolean | number, model: SysDicModel, }) {
  const {created, model, form, onFinish} = props;
  created ? model.status = true : null;
  return (
    <Form form={form} onFinish={onFinish} initialValues={model} {...props} {...formLayout}>
      <FormItem
        name="categoryCode"
        label="字典类型编码"
        rules={[{required: true, message: '请输入字典类型编码'}]}
      >
        <Input maxLength={100} readOnly={true}/>
      </FormItem>
      <FormItem
        name="parentId"
        label="字典上级主键"
      >
        <TreeSelectParent
          allowClear={true}
          onLoadTreeData={() => {
            return service.selectTreeByCategoryCode(model.categoryCode)
          }}
          created={Boolean(created)}
          dataId={model.id}
          dataParentId={model.parentId}
          getPopupContainer={triggerNode => triggerNode.parentElement}/>
      </FormItem>

      <FormItem
        name="name"
        label="字典名称"
        rules={[{required: true, message: '请输入字典名称'}]}
      >
        <Input maxLength={100}/>
      </FormItem>

      <FormItem
        name="value"
        label="字典值"
        rules={[{required: true, message: '请输入字典值'}]}
      >
        <Input maxLength={500}/>
      </FormItem>

      <FormItem
        name="status"
        label="状态"
        valuePropName="checked"
      >
        <Switch checked={model.status}/>
      </FormItem>
      <FormItem
        name="remark"
        label="备注"
      >
        <Input.TextArea maxLength={500} rows={4}/>
      </FormItem>
    </Form>

  );
}

export default React.memo(SysDicEdit);


